<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
</style>

<body>
<div id="app">
    <el-row class="demo-autocomplete">
        <el-col :span="2">客户名称</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findCol.customerInfoName"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入客户名称"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2">客户身份证号</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="findCol.customerInfoIdentityNumber"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入客户身份证号"
                    :trigger-on-focus="true"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
        <el-col :span="2">  客户手机号</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="findCol.customerInfoTelephone"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入客户手机号"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
    </el-row>
    <br>
    <el-row>
        <el-col :span="2">  催收人员姓名</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="findCol.colPeople"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入催收人员姓名"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
        <el-col :span="2"> &nbsp;&nbsp;&nbsp;催收状态</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="findCol.colStatus"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入催收状态"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findByParam(1,10)">查询</el-button>

            <el-button size="small" @click="exportfile(1,10)"  type="primary"  icon="el-icon-download"  plain >导出</el-button>
        </el-col>
    </el-row>

    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 700px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <!--<el-table-column
                    prop="id"
                    label="订单号"
                    width="100">
            </el-table-column>-->
            <el-table-column
                    prop="orderNum"
                    label="借款订单编号"
                    width="100">
            </el-table-column>
           <el-table-column
                    prop="orderInfo.applyInfo.customerInfo.name"
                    label="客户姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="colStatus"
                    :formatter="statusFormatter"
                    label="催款状态"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="colDesc"
                    label="最新催收记录"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="appointTime"
                    :formatter="dateFormatter"
                    label="委派催收时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="userInfo.userName"
                    label="催收人员 "
                    width="100">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="dialogFormCollectionfind = true ,find_collectionInfo(scope.row),findRPI(scope.row)" >查看</el-button>
                    <el-button type="text" size="small" @click="dialogFormCollectionmod = true,fill_collectionInfo(scope.row)">添加催收记录</el-button>
                    <el-button type="text" size="small" @click="collection(scope.row)">催收</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total,prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </template>


    <el-dialog title="催收详情" :visible.sync="dialogFormCollectionfind" fullscreen>
        <el-form ref="formInfo" :model="formInfo" label-width="80px">
            <el-row>
                <el-form-item  label="催收信息">
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="催收人员">
                        <el-input v-model="formInfo.userName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="催收状态">
                        <el-input v-model="formInfo.colStatus"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="催收时间">
                        <el-input v-model="formInfo.appointTime"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8" >
                    <el-form-item label="催收备注">
                        <el-input v-model="formInfo.colDesc"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>




            <el-row>
                <el-col :span="8" >
                    <el-form-item label="账单信息">
                    </el-form-item>
                </el-col>
            </el-row>

            <el-table
                    :data="trpi"
                    style="width: 100%;height: 400px"
                    :row-class-name="tableRowClassName"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
                <el-table-column
                        prop="dataNum"
                        label="期数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="waitMoney"
                        label="待还金额"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="penaltyInteres"
                        label="罚息">
                </el-table-column>
                <el-table-column
                        prop="alsoStatus"
                        label="还款状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="overduDays"
                        label="逾期状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="alsoTime"
                        :formatter="dateFormatterT"
                        label="应还日期"
                        width="200"
                >
                </el-table-column>
            </el-table>

            <el-row>
                <el-col :span="8" >
                    <el-form-item label="客户信息">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="客户姓名">
                        <el-input v-model="formInfo.customerName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="身份证号">
                        <el-input v-model="formInfo.identityNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="客户手机号">
                        <el-input v-model="formInfo.telephone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8" >
                    <el-form-item label="贷款产品">

                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8" >
                    <el-form-item label="个人信息">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="电子邮箱">
                        <el-input v-model="formInfo.email"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="民族">
                        <el-input v-model="formInfo.nation"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="学历">
                        <el-input v-model="formInfo.education"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="移动电话">
                        <el-input v-model="formInfo.telephone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="婚姻状况">
                        <el-input v-model="formInfo.maritalStatus"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="供养人数">
                        <el-input ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="户口所在地区">
                        <el-input v-model="formInfo.areaOfAccount"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="详细地址">
                        <el-input v-model="formInfo.detailedAccountAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="现居住地">
                        <el-input v-model="formInfo.currentLivingArea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="现居住地详细地址">
                        <el-input    v-model="formInfo.detailedLivingAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="入住时间">
                        <el-input     v-model="formInfo.checkInTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="户口类型">
                        <el-input v-model="formInfo.accountType"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8" >
                    <el-form-item label="职业信息">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="工作单位">
                        <el-input v-model="formInfo.workCompany"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="单位性质">
                        <el-input v-model="formInfo.companyProperty"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="所属行业">
                        <el-input v-model="formInfo.industry"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="职业级别">
                        <el-input v-model="formInfo.jobLevel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="入职时间">
                        <el-input v-model="formInfo.entryTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="单位电话">
                        <el-input v-model="formInfo.enterprisePhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="单位地址">
                        <el-input v-model="formInfo.enterpriseAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="月薪">
                        <el-input v-model="formInfo.monthlySalary"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="发薪方式">
                        <el-input v-model="formInfo.payMethod"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="其他收入">
                        <el-input v-model="formInfo.otherIncome"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="企业类型">
                        <el-input v-model="formInfo.companyType"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="成立时间">
                        <el-input v-model="formInfo.establishedTime"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="8" >
                    <el-form-item label="家庭经济">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="客户月收入">
                        <el-input v-model="formInfo.customerMonthlyIncome"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="配偶月收入">
                        <el-input v-model="formInfo.monthlyIncomeOfSpouse"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="家庭月收入">
                        <el-input v-model="formInfo.customerMonthlyIncome"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="家庭月支出">
                        <el-input v-model="formInfo.familyMonthlyExpen"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="家庭资产总额">
                        <el-input v-model="formInfo.totalFamilyAssets"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="家庭负债总额">
                        <el-input v-model="formInfo.totalHouseholdDebt"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="8" >
                    <el-form-item label="联系人信息">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="配偶姓名">
                        <el-input v-model="formInfo.spouseName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="单位或家庭住址">
                        <el-input v-model="formInfo.spouseEnterpriseAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="配偶电话">
                        <el-input v-model="formInfo.spousePhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="直系亲属姓名">
                        <el-input v-model="formInfo.immediateFamilyMemberName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="单位或家庭住址">
                        <el-input v-model="formInfo.immediateFamilyMemberCompanyAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="直系亲属电话">
                        <el-input v-model="formInfo.immediateFamilyMemberPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="其他联系人姓名">
                        <el-input v-model="formInfo.commonContactName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="单位或家庭住址">
                        <el-input v-model="formInfo.commonContactCompanyAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="其他联系人电话">
                        <el-input v-model="formInfo.commonContactPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item  label="家人是否知晓借款">
                        <el-input v-model="formInfo.isFamilyKnowLoan"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>




            <el-row>
                <el-col :span="8" >
                    <el-form-item label="资产信息">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="车辆品牌">
                        <el-input v-model="formInfo.brands"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="车型">
                        <el-input v-model="formInfo.carModel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="车牌号">
                        <el-input v-model="formInfo.vehicleLicense"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item label="车架号">
                        <el-input v-model="formInfo.frameNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="发动机号">
                        <el-input v-model="formInfo.engineNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="车身颜色">
                        <el-input v-model="formInfo.carColor"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item label="车辆年限">
                        <el-input v-model="formInfo.vehicleYears"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="购车时间">
                        <el-input v-model="formInfo.buyTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="裸车价格">
                        <el-input v-model="formInfo.bareCarPrice"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="上牌时间">
                        <el-input v-model="formInfo.carLicenseTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item label="行驶里程">
                        <el-input v-model="formInfo.drivenDistance"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="车况">
                        <el-input v-model="formInfo.carCondition"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8" >
                    <el-form-item label="车辆用途">
                        <el-input v-model="formInfo.vehicleUse"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8" >
                    <el-form-item label="城市">
                        <el-input v-model="formInfo.city"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </el-dialog>


    <el-dialog title="添加催收信息" :visible.sync="dialogFormCollectionmod">
        <el-form :model="form" :inline="true">

            <el-input v-model="form.collectionInfo_id" value="form.collectionInfo_id" style="display: none" autocomplete="off"></el-input>
            <el-form-item label="最新催收记录" :label-width="formLabelWidth">
                <el-input v-model="form.colLog" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormCollectionmod = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormCollectionmod = false,mod(form.collectionInfo_id)">确 定</el-button>
        </div>
    </el-dialog>
</div>

<div id="paging">

</div>
</body>


<script type="text/javascript" th:inline="javascript">


    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        demo.findByParam(1,10);
    }

    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    orderNum:"1",
                    customerName: 'sss',
                    colStatus:"已催收",
                    colDesc:"客户说三天后还款",
                    appointTime:"",
                    colPeople:"小罗",
                    userInfo:{
                        userName:"",
                    },
                    orderInfo:{
                        applyInfo: {
                            customer:{
                                vehicleInfo:{}
                            }
                        }
                    },
                    applyInfo:{},
                    customerInfo: {}
                }
            ],

            rpi:[
                { dataNum:"",
                    waitMoney:"",
                    penaltyInteres:"",
                    alsoStatus:"",
                    overduDays:"",
                    alsoTime:""}

            ]

        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                //下面是分页初始参数
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                total:60,


                tableData: datas.goods,  //  datas数据 中的数组goods
                trpi:datas.rpi,//这是rpi数组
                dialogFormCollectionmod: false,  //这是点击添加之后，原本隐藏的 编辑框就变为true，就显示编辑框
                dialogFormCollectionfind: false,   //查看
                form: {      //这个是添加里面的form表单，一下是表单要修改的内部的字段名
                    collectionInfo_id:"",
                    colLog:""


                    //截至这里编辑框内的内容结束
                },

                formInfo:{

                },
                formLabelWidth: '120px',

                //tabledate搜索关键字
                findCol: {
                    customerInfoName: "",
                    customerInfoIdentityNumber: "",
                    customerInfoTelephone: "",
                    colPeople: "",
                    colStatus: "",
                },
                applyInfo:"",
                //查看
                formInfo:{
                    userInfo: {
                        userName: ''
                    }

                },

                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: '',
                customerInfo:[{
                    id:1,
                    name:'Jinli',
                    telephone:'15508063557'
                }],
            };
        },


        methods: {



            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.customerInfo.productInfo.moneyChannelInfo.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },
            // 日期格式化2
            dateFormatterT (row, column) {
                let datetime = row.alsoTime;
                // alert(datetime);
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },
            //催收
            collection:(collectionInfo)=>{
                if (colStatus=="未还款"){
                    axios.get([[@{/collection/cEmail}]],{
                        params:{
                            email:email
                        }
                    })
                .then(res => {
                        console.log(res);
                        location.reload();
                    }).catch(function (error) {
                        console.log(error);
                    });
                }else{
                    alert("客户已还款");
                }
            },

            //查询分期还款表
            findRPI(collectionInfo){

                axios.get([[@{collection/id}]],{
                    params:{
                            id:collectionInfo.orderInfo.applyInfo.customerInfo.id
                        // colStatus:this.findCol.colStatus

                    }
                })
            .then(resp => {//此处一定要用 箭头函数  不然this 就不是this


                    this.trpi=resp.data.data.returnPlanInfo;



                })
                    .catch(error => {
                        console.log(error);
                    });

            },
            //点击表格中某一行的查看后，在弹出的对话框中显示数据
            find_collectionInfo:(collectionInfo)=>{
                demo.formInfo.userName=collectionInfo.userInfo.userName;
                demo.formInfo.colStatus=collectionInfo.colStatus;
                demo.formInfo.appointTime=collectionInfo.appointTime;
                demo.formInfo.colDesc=collectionInfo.colDesc;
                demo.formInfo.customerName=collectionInfo.customerName;


                demo.formInfo.telephone=collectionInfo.orderInfo.applyInfo.customerInfo.telephone;
                demo.formInfo.identityNumber=collectionInfo.orderInfo.applyInfo.customerInfo.identityNumber;    //身份证号码;
                demo.formInfo.registerTime=collectionInfo.orderInfo.applyInfo.customerInfo.registerTime;        //注册时间;
                demo.formInfo.lastVisitTime=collectionInfo.orderInfo.applyInfo.customerInfo.lastVisitTime;       //上次访问时间
                demo.formInfo.remarks=collectionInfo.orderInfo.applyInfo.customerInfo.remarks;           //备注
                demo.formInfo.loanStatus=collectionInfo.orderInfo.applyInfo.customerInfo.loanStatus;          //贷款状态
                demo.formInfo.customerStatus=collectionInfo.orderInfo.applyInfo.customerInfo.customerStatus;      //客户状态
                demo.formInfo.cumulativeLoan=collectionInfo.orderInfo.applyInfo.customerInfo.cumulativeLoan;    //累计放款
                demo.formInfo.customerNote=collectionInfo.orderInfo.applyInfo.customerInfo.customerNote;      //客户备注

                demo.formInfo.email=collectionInfo.orderInfo.applyInfo.customerInfo.email;             //电子邮箱

                if(collectionInfo.orderInfo.applyInfo.customerInfo.nation===1){
                    demo.formInfo.nation="汉族";
                }else {
                    demo.formInfo.nation="其他民族"
                };

                if(collectionInfo.orderInfo.applyInfo.customerInfo.education===1){
                    demo.formInfo.education="本科";
                }else {
                    demo.formInfo.education="高中";
                };

                if(collectionInfo.orderInfo.applyInfo.customerInfo.maritalStatus===1){//是否婚配
                    demo.formInfo.maritalStatus="已婚";
                }else {
                    demo.formInfo.maritalStatus="未婚";
                };


                demo.formInfo.healthStatus=collectionInfo.orderInfo.applyInfo.customerInfo.healthStatus;        //健康状况
                demo.formInfo.areaOfAccount=collectionInfo.orderInfo.applyInfo.customerInfo.areaOfAccount;     //户口所在地区
                demo.formInfo.detailedAccountAddress=collectionInfo.orderInfo.applyInfo.customerInfo.detailedAccountAddress;  //户口详细地址


                demo.formInfo.detailedLivingAddress=collectionInfo.orderInfo.applyInfo.customerInfo.detailedLivingAddress;


                demo.formInfo.checkInTime=collectionInfo.orderInfo.applyInfo.customerInfo.checkInTime;


                if(collectionInfo.orderInfo.applyInfo.customerInfo.accountType===1){//户口类型
                    demo.formInfo.accountType="龙村";
                }else {
                    demo.formInfo.accountType="城镇";
                };

                demo.formInfo.currentLivingArea=collectionInfo.orderInfo.applyInfo.customerInfo.currentLivingArea; //现居住地区
                demo.formInfo.checkInTime=collectionInfo.orderInfo.applyInfo.customerInfo.checkInTime; //入住时间
                demo.formInfo.frontPhotoPath=collectionInfo.orderInfo.applyInfo.customerInfo.frontPhotoPath;    //身份证正面照片

                demo.formInfo.reversePhotoPath=collectionInfo.orderInfo.applyInfo.customerInfo.reversePhotoPath;  //身份证背面照片
                demo.formInfo.handheldPhotoPath=collectionInfo.orderInfo.applyInfo.customerInfo.handheldPhotoPath; //身份证手持照片
                demo.formInfo.workCompany=collectionInfo.orderInfo.applyInfo.customerInfo.workCompany;       //工作单位


                if(collectionInfo.orderInfo.applyInfo.customerInfo.companyProperty===1){//单位性质
                    demo.formInfo.companyProperty="机关";
                }else {
                    demo.formInfo.companyProperty="事业单位";
                };
                demo.formInfo.industry=collectionInfo.orderInfo.applyInfo.customerInfo.industry;          //所属行业
                demo.formInfo.jobLevel=collectionInfo.orderInfo.applyInfo.customerInfo.jobLevel;          //职位级别
                demo.formInfo.entryTime=collectionInfo.orderInfo.applyInfo.customerInfo.entryTime; //入职时间
                demo.formInfo.workingYears=collectionInfo.orderInfo.applyInfo.customerInfo.workingYears;          //工作年限
                demo.formInfo.enterprisePhone=collectionInfo.orderInfo.applyInfo.customerInfo.enterprisePhone;       //单位电话
                demo.formInfo.enterpriseAddress=collectionInfo.orderInfo.applyInfo.customerInfo.enterpriseAddress;     //单位地址
                demo.formInfo.enterpriseDetailAddress=collectionInfo.orderInfo.applyInfo.customerInfo.enterpriseDetailAddress; //详细地址
                demo.formInfo.monthlySalary=collectionInfo.orderInfo.applyInfo.customerInfo.monthlySalary;         //月薪
                demo.formInfo.payMethod=collectionInfo.orderInfo.applyInfo.customerInfo.payMethod;               //发薪方式



                demo.formInfo.companyType=collectionInfo.orderInfo.applyInfo.customerInfo.companyType;

                demo.formInfo.otherIncome=collectionInfo.orderInfo.applyInfo.customerInfo.otherIncome;       //其他收入
                demo.formInfo.companyType=collectionInfo.orderInfo.applyInfo.customerInfo.companyType;         //企业类型
                demo.formInfo.establishedTime=collectionInfo.orderInfo.applyInfo.customerInfo.establishedTime;//成立时间


                demo.formInfo.familyMonthlyIncome=collectionInfo.orderInfo.applyInfo.customerInfo.familyMonthlyIncome;//家庭月收入
                demo.formInfo.monthlyIncomeOfSpouse=collectionInfo.orderInfo.applyInfo.customerInfo.monthlyIncomeOfSpouse;//配偶月收入
                demo.formInfo.customerMonthlyIncome=collectionInfo.orderInfo.applyInfo.customerInfo.customerMonthlyIncome;//客户月收入
                demo.formInfo.familyMonthlyExpen=collectionInfo.orderInfo.applyInfo.customerInfo.familyMonthlyExpen;//家庭月支出
                demo.formInfo.totalFamilyAssets=collectionInfo.orderInfo.applyInfo.customerInfo.totalFamilyAssets;//家庭资产总额
                demo.formInfo.totalHouseholdDebt=collectionInfo.orderInfo.applyInfo.customerInfo.totalHouseholdDebt;//家庭负债总额


                if(collectionInfo.orderInfo.applyInfo.customerInfo.isFamilyKnowLoan===1){//家人是否知晓
                    demo.formInfo.isFamilyKnowLoan="知道";
                }else {
                    demo.formInfo.isFamilyKnowLoan="不知道";
                };


                demo.formInfo.spouseName=collectionInfo.orderInfo.applyInfo.customerInfo.spouseName;    //配偶姓名
                demo.formInfo.spousePhone=collectionInfo.orderInfo.applyInfo.customerInfo.spousePhone;   //配偶电话

                demo.formInfo.spouseEnterpriseAddress=collectionInfo.orderInfo.applyInfo.customerInfo.spouseEnterpriseAddress; //配偶单位地址
                demo.formInfo.immediateFamilyMemberName=collectionInfo.orderInfo.applyInfo.customerInfo.immediateFamilyMemberName;//直系亲属姓名
                demo.formInfo.commonContactName=collectionInfo.orderInfo.applyInfo.customerInfo.commonContactName;       //常联系人姓名
                demo.formInfo.immediateFamilyMemberCompanyAddress=collectionInfo.orderInfo.applyInfo.customerInfo.immediateFamilyMemberCompanyAddress;//直系单位地址
                demo.formInfo.immediateFamilyMemberPhone=collectionInfo.orderInfo.applyInfo.customerInfo.immediateFamilyMemberPhone; //直系亲属电话
                demo.formInfo.commonContactPhone=collectionInfo.orderInfo.applyInfo.customerInfo.commonContactPhone;  //常联系人电话
                demo.formInfo.commonContactCompanyAddress=collectionInfo.orderInfo.applyInfo.customerInfo.commonContactCompanyAddress; //常联系人单位地址




                demo.formInfo.brands=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.brands;
                demo.formInfo.vehicleLicense=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.vehicleLicense;
                demo.formInfo.carColor=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.carColor;
                demo.formInfo.vehicleYears=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.vehicleYears;
                demo.formInfo.carCondition=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.carCondition;

                demo.formInfo.name=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.name;
                demo.formInfo.carModel=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.carModel;
                demo.formInfo.frameNumber=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.frameNumber;
                demo.formInfo.engineNumber=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.engineNumber;
                demo.formInfo.bareCarPrice=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.bareCarPrice;
                demo.formInfo.buyTime=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.buyTime;
                demo.formInfo.carLicenseTime=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.carLicenseTime;
                demo.formInfo.drivenDistance=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.drivenDistance;
                demo.formInfo.carCondition=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.carCondition;
                demo.formInfo.vehicleUse=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.vehicleUse;
                demo.formInfo.city=collectionInfo.orderInfo.applyInfo.customerInfo.vehicleInfo.city;





            },


            exportfile(pageNum,pageSize) {
                //文件导出
                alert("导出当前页");
                //获得当前页面表格的的数据并发送axios
                console.log(JSON.stringify(app.tableData));
                axios.get([[@{poi/gettabledata}]],{
                    params:{
                        pageNum:1,
                            pageSize:10,
                            //搜索的关键字
                            customerName:this.findCol.customerInfoName,
                            idCard:this.findCol.customerInfoIdentityNumber,
                            telephone:this.findCol.customerInfoTelephone,
                            colName:this.findCol.colPeople,
                        // colStatus:this.findCol.colStatus
                    }
                }).then(function (msg) {
                        //创建a标签
                        var a = document.createElement("a");
                        var bodyFa = document.getElementsByTagName("body");//
                        bodyFa[0].appendChild(a);//把创建的节点a 添加到父类body 中;
                        // alert(msg.data.msg);
                        a.setAttribute("href", "poi/download?path=" + msg.data.msg);//给创建的a标签设置href值;
                        a.click();
                        bodyFa[0].removeChild(a);
                        alert("导出成功");
                    }
                )
            },


            //点击表格中某一行的“编辑后”，在 弹出的对话框中填充数据
            fill_collectionInfo:(collectionInfo)=>{
                console.log("collectionInfo_id="+collectionInfo.id);
                demo.form.collectionInfo_id=collectionInfo.id;
            },

            //“编辑”修改催收记录数据
            mod :(id)=>{

                let params =new FormData();
                params.append("colDesc",demo.form.colLog);
                // alert(id);
                // alert(demo.form.colLog);
                axios.put([[@{/collection/}]] + id,params).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },



            // 催收状态格式化
            statusFormatter(row, column) {
                let colStatus = row.colStatus;
                if(colStatus === 0){
                    return '已完成'
                } else {
                    return '催收中'
                }
            },

            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.appointTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            //分页
            handleCurrentChange: function(currentPage){
                demo.currentPage = currentPage;
                demo.findByParam(demo.currentPage,10)
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },


            //分页查询数据：把后端的数据，显示在table上
            findByParam(pageNum, pageSize) {
                console.log("in findByParam");
              /*  let statusRaw = '';*/
                /* if (this.findUser.status=='-1'){
                     statusRaw='0';
                 }else if (this.findUser.status=='1'){
                     statusRaw='1';
                 }*/
                //alert("statusRaw="+statusRaw);
                axios.get([[@{collection/page}]],{
                    params:{
                        pageNum:1,
                        pageSize:10,
                        //搜索的关键字
                        customerName:this.findCol.customerInfoName,
                        idCard:this.findCol.customerInfoIdentityNumber,
                        telephone:this.findCol.customerInfoTelephone,
                        colName:this.findCol.colPeople
                       // colStatus:this.findCol.colStatus
                    }
                })
            .then(resp => {//此处一定要用 箭头函数  不然this 就不是this
                    this.tableData = resp.data.rows;

                    this.total = resp.data.total;


                })
                    .catch(error => {
                        console.log(error);
                    });
            },


            //查看的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);

            },



            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },//method方法结束



    });

    //分页还没写


</script>
</html>